<template>
  <div class="app-container home">
    <lun-bo></lun-bo>
    <!-- 这是首页111 -->
    <div class="content banner">
      <div class="main">
        <!-- <p>丰富、稳定的自主研发产品</p> -->
        <p>创新引领未来，科技成就梦想</p>
        <div class="icon_box df jcsb">
          <!--  // 动态添加类名 -->
          <!-- <div class="icon_item" :class="{ iconActive: iconActiveId === item.id }" v-for="(item, index) in tabsList" :key="index" @click="iconhand(item)" > -->
            <!-- 等同于下面的写法 -->
          <div :class="['icon_item', iconActiveId === item.id ? 'iconActive': '' ]" v-for="(item, index) in tabsList" :key="index" @click="iconhand(item)" >
            <img :src="item.icon" alt="" class="icon">
            <img :src="item.iconOn" alt="" class="iconOn">
            <div class="subtitle">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <!--介绍区域： 图片与详情 -->
      <div class="introduce df"v-for="(item, index) in homePicList" :key="item.id" v-show="item.title === icontitle">
          <!-- 图片 -->
          <div class="imgbox"  >
            <img :src="item.picUrl" alt="">
          </div>
          <!-- 文字区域 -->
          <div class="explain">
            <div class="explain-title">{{item.title}}</div>
            <div class="explain-content">{{item.content}}</div>
          </div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="sever">
      <div class="sever-title">为每一位客户提供高品质的服务</div>
      <div class="sever-box df jcsb">
        <div class="sever-detail" v-for="(item, index) in severList" :key="index">
          <div class="num">{{item.num}}</div>
          <div class="name">{{item.name}}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      iconActiveId: 2,
      // pictitle: '系统集成',
      icontitle: '系统集成',
      tabsList: [
        {id: 1, title: '技术推广', icon: require('@/assets/xc-img/ico_01.png'), iconOn: require('@/assets/xc-img/ico_01_on.png')},
        {id: 2, title: '系统集成', icon: require('@/assets/xc-img/ico_02.png'), iconOn: require('@/assets/xc-img/ico_02_on.png')},
        {id: 3, title: '技术咨询', icon: require('@/assets/xc-img/ico_06.png'), iconOn: require('@/assets/xc-img/ico_06_on.png')},
        {id: 4, title: '消防设备', icon: require('@/assets/xc-img/ico_04.png'), iconOn: require('@/assets/xc-img/ico_04_on.png')},
        {id: 5, title: '办公用品', icon: require('@/assets/xc-img/ico_05.png'), iconOn: require('@/assets/xc-img/ico_05_on.png')},
        {id: 6, title: '销售与维修', icon: require('@/assets/xc-img/ico_03.png'), iconOn: require('@/assets/xc-img/ico_03_on.png')},
      ],
      homePicList: [
        {id: 1, title: '技术推广', picUrl: require('@/assets/xc-img/home_03.png'), content: '信策科技专注于将最新的科技成果转化为实际应用，通过技术推广服务帮助企业和个人提高工作效率和生活质量。我们不仅提供技术咨询，还致力于技术转让和技术推广，确保客户能够充分利用前沿技术。'},
        {id: 2, title: '系统集成', picUrl: require('@/assets/xc-img/home_02.png'), content:'我们提供一站式的计算机信息系统集成服务，包括系统设计、配置、安装和维护。无论是企业资源规划（ERP）系统还是客户关系管理（CRM）系统，信策科技都能提供定制化的解决方案，满足不同规模企业的需求。'},
        {id: 3, title: '技术咨询', picUrl: require('@/assets/xc-img/home_01.png'), content:'在这个信息爆炸的时代，信策科技提供专业的互联网信息技术咨询服务，帮助客户解决网络建设、数据管理、网络安全等问题，提升企业的信息化水平。'},
        {id: 4, title: '消防设备', picUrl: require('@/assets/xc-img/home_04.png'), content:'安全是我们最关心的问题之一。信策科技销售各种消防设备，包括灭火器、消防栓、烟雾探测器、应急照明系统等。我们还提供消防系统的安装、维护和检测服务，确保客户的安全防护体系始终处于最佳状态。'},
        {id: 5, title: '办公用品', picUrl: require('@/assets/xc-img/home_05.png'),content:'我们的办公用品系列包括各类文具、办公设备、打印耗材和会议用品等。信策科技致力于提供高效、便捷的办公解决方案，帮助企业和个人提高工作效率。我们还提供定制服务，为客户打造具有企业特色的办公用品套装。'},
        {id: 6, title: '销售与维修', picUrl: require('@/assets/xc-img/home_06.png'),content:'我们销售各类计算机软硬件及辅助设备、办公自动化设备、安防设备等，并提供专业的维修服务。信策科技确保您购买的每一件产品都能得到最好的性能和最长的使用寿命。'}
      ],
      severList: [
        {name: '服务客户', num: '100+'},
        {name: '技术咨询', num: '70+'},
        {name: '技术推广', num: '80%'},
        {name: '客户满意', num: '99%'}
      ]
    };
  },
  methods: {
    // 点击图标
    iconhand(icon) {
      console.log(icon);
      this.iconActiveId = icon.id
      // console.log(this.iconActiveId);
      this.icontitle = icon.title
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  .content {
    .main {
      p {
        text-align: center;
        color: #333333;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 40px;
        margin: 98px 0 85px;
      }
      .icon_item {
        // 图片居中对齐
        text-align: center;
        .icon {
          display: block;
          margin: 0 auto;
        }
        .iconOn {
          display: none;
        }
        .subtitle {
          color: #31322C;
          font-family: Microsoft YaHei;
          font-size: 20px;
          margin: 9px 0 0 0;
        }
      }
      // 动态添加类名
      .iconActive {
        .icon {
          display: none;
        }
        .iconOn {
          display: block;
          margin: 0 auto;
        }
        .subtitle {
          color: #c00000;
          font-family: Microsoft YaHei;
          font-size: 20px;
          margin: 9px 0 0 0;
        }
      }
    }
  .introduce {
    margin: 50px 0 100px;
    height: 460px;
    // border: 1px solid pink;
    img {
      //height: 460px;
      //width: auto;
      max-width: 100%;
      height: 460px;
    }
    .explain {
      border: 1px solid green;
      flex: 1;
      height: 100%;
      background: #c00000;
      padding: 50px 30px;
      color: #FFFFFF;
      .explain-title {
        border-bottom: 1px solid #FFFFFF;
        height: 100px;
        text-align: left;
        line-height: 100px;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 40px;
      }
      .explain-content {
        margin: 24px 0;
        color: #FFE1E1;
        font-family: Microsoft YaHei;
        font-size: 16px;
        line-height: 200%;
      }
    }
  }
  }
  .sever {
    height: 468px;
    background: url('../../assets/xc-img/homeNum.png');
    padding: 80px 100px;
    .sever-title {
      text-align: center;
      text-align: center;
      color: #31322C;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 40px;
    }
    .sever-box {
      margin-top: 100px;
      .sever-detail {
        text-align: center;
        .num {
          color: #333333;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          font-size: 64px;
        }
        .name {
          font-family: Microsoft YaHei;
          font-size: 20px;
        }
      }
    }
  }
}

</style>

